<template>
    <container class="js-html">
        <toolbar>
            <div class="right" slot="right">
                <el-button size="mini" type="success" plain @click="templateClick('TABLE')">TABLE模板</el-button>
                <el-button size="mini" type="success" plain @click="templateClick('INPUT')">INPUT模板</el-button>
                <el-button size="mini" type="success" plain @click="templateClick('RULE')">RULE模板</el-button>
            </div>
        </toolbar>

        <el-card class="main">
            <operation>
                <el-button type="warning" slot="right" size="mini" @click="convertClick">转换</el-button>
            </operation>

            <space height="10px"></space>

            <el-row>
                <el-col :span="11">
                    <monaco-editor v-model="js" height="75vh" lang="javascript"></monaco-editor>
                </el-col>
                <el-col :span="13">
                    <el-tabs tab-position="right">
                        <el-tab-pane label="TABLE">
                            <monaco-editor v-model="table" height="75vh" lang="html"></monaco-editor>
                        </el-tab-pane>
                        <el-tab-pane label="INPUT">
                            <monaco-editor v-model="input" height="75vh" lang="html"></monaco-editor>
                        </el-tab-pane>
                        <el-tab-pane label="RULE">
                            <monaco-editor v-model="rule" height="75vh" lang="javascript"></monaco-editor>
                        </el-tab-pane>
                    </el-tabs>
                </el-col>
            </el-row>
        </el-card>

        <!--dialog-->
        <template>
            <model-template-dialog
                    v-if="templateDialog.visible"
                    v-model="templateDialog.visible"
                    :default-template="templateDialog.defaultTemplate"
                    :cache-key="templateDialog.cacheKey">

            </model-template-dialog>
        </template>
    </container>
</template>

<script type="text/ecmascript-6">
  import Container from "../../components/common/Container";
  import Toolbar from "../../components/common/Toolbar";
  import MonacoEditor from "../../components/editor/MonacoEditor/index";
  import Operation from "../../components/common/Operation";
  import Space from "../../components/common/Space";
  import { tableTemplate, inputTemplate, ruleTemplate } from "./default-template";
  import { JS_HTML } from "../../res/config-key";
  import ModelTemplateDialog from "../../components/template-dialog/ModelTemplateDialog";
  import * as Mustache from "mustache";
  import { local } from "../../utils/js/storage";

  /**
   * @author 白雨浓
   * @date 2019/7/9 17:29
   *
   * Js转HTML
   **/
  export default {
    name: 'JsHtml',
    components: {ModelTemplateDialog, Space, Operation, MonacoEditor, Toolbar, Container},
    data() {
      return {
        templateDialog: {
          visible: false,
          defaultTemplate: null,
          cacheKey: null,
        },
        template: {
          table: tableTemplate,
          input: inputTemplate,
          rule: ruleTemplate,
        },
        js: '',
        table: '',
        input: '',
        rule: '',
        data: {},
      }
    },
    created() {
      ['table', 'input', 'rule'].forEach(key => {
        const template = local.getItem(JS_HTML[key.toUpperCase() + '_TEMPLATE']);

        if (template) {
          this.template[key] = template;
        }
      });

      const js = this.$route.params['js'];
      if (js) {
        this.js = js;
      }
    },
    mounted() {
    },
    methods: {
      templateClick(type) {
        switch (type) {
          case 'TABLE':
            this.templateDialog = {
              visible: true,
              defaultTemplate: tableTemplate,
              cacheKey: JS_HTML.TABLE_TEMPLATE,
            };
            break;
          case 'INPUT':
            this.templateDialog = {
              visible: true,
              defaultTemplate: inputTemplate,
              cacheKey: JS_HTML.INPUT_TEMPLATE,
            };
            break;
          case 'RULE':
            this.templateDialog = {
              visible: true,
              defaultTemplate: ruleTemplate,
              cacheKey: JS_HTML.RULE_TEMPLATE,
            };
            break;
        }
      },
      convertClick() {
        const lines = this.js.split('\n');

        const COMMENT_REG = /\/\*.*\*\//;
        const fields = lines
          .filter(item => item.includes(':') && item.includes(','))
          .map(item => {

            const res = COMMENT_REG.exec(item);
            let comment, dataType;
            if (res) {
              const all = res[0];
              const ss = all.substring(2, all.length - 2).split(' ');
              comment = ss[0] ? ss[0].trim() : null;
              dataType = ss[1] ? ss[1].trim() : null;
            }
            return {
              field: item.split(':')[0].trim(),
              comment,
              dataType,
            };
          })
          .filter(item => item);

        this.data = {
          fields
        };

        ['table', 'input', 'rule'].forEach(key => {
          let result = Mustache.render(this.template[key], this.data);
          result = result.replace(/&lt;/g, "<");
          result = result.replace(/&gt;/g, ">");

          this.$set(this, key, result);
        });
      },
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .js-html {
    }

    .main {
        width 98%
        margin 20px auto
    }


</style>
